<script lang="ts" setup>
import { getUserByPhone, changeUserRole } from '../../api/user'
import { roleList, RoleEnum } from '../../enums/Role'
import { HttpStatusCode } from "axios"
import {ElMessage} from "element-plus";
let wxUsers = ref<ListWxUser[]>([])
let role = ref<RoleEnum>(RoleEnum.CLIENT)
let id = ref<string>('')
const loading = ref<boolean>(false)


const remoteFun = async (query: string) => {
  if(query === '') {
    wxUsers.value = []
    return
  }
  const res = await getUserByPhone(query)
  if(res.statusCode === HttpStatusCode.Ok) {
    wxUsers.value = res.data as ListWxUser[]
  }
}

const sub = async () => {
  let data = {
    role: role.value
  }
  const res = await changeUserRole(id.value, data)
  if(res.statusCode === HttpStatusCode.Ok) {
    ElMessage({
      message: '签约成功',
      type: 'success'
    })
    id.value = ''
    wxUsers.value = []
  }
}
</script>

<template>
<div class="container">
  <div class="box">
    <span class="title">签约</span>
    <el-select
        class="select_user"
        v-model="id"
        filterable
        remote
        reserve-keyword
        placeholder="输入用户手机号"
        :remote-method="remoteFun"
        :loading="loading"
    >
      <el-option
          v-for="item in wxUsers"
          :key="item.id"
          :label="item.nick_name"
          :value="item.id"
      />
    </el-select>
    <el-select v-model="role" class="select_user" placeholder="选择角色">
      <el-option
          v-for="item in roleList"
          :key="item.id"
          :label="item.label"
          :value="item.value"
      />
    </el-select>
    <el-button class="sub_btn" type="primary" @click="sub">提交</el-button>
    <span class="tips">* 签约完毕后用户需在小程序重新登录更新签约角色</span>
  </div>
</div>
</template>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .box {
    width: 600px;
    height: 600px;
    border: 1px solid #e0e0e0;
    transition: all .1s;
    display: flex;
    flex-direction: column;
    align-items: center;
    &:hover {
      box-shadow: #e0e0e0 0 0 2px 2px;
      transition: all .1s;
    }
    .title {
      font-size: 18px;
      margin-top: 20px;
    }
    .select_user {
      width: 400px;
      margin-top: 20px;
    }
    .sub_btn {
      width: 100px;
      margin-top: 20px;
    }
    .tips {
      margin-top: 20px;
      font-size: 14px;
      color: gray;
      font-weight: 100;
    }
  }
}
</style>
